<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>宜宾学院学生证书综合管理系统用户登录</title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="/yibinu_certificate/static/assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="/yibinu_certificate/static/assets/font-awesome-4.7.0/css/font-awesome.css">
		<link rel="stylesheet" href="/yibinu_certificate/static/assets/css/form-elements.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

		<!-- Javascript -->
        <script src="/yibinu_certificate/static/assets/js/jquery-3.3.1.js"></script>
        <script src="/yibinu_certificate/static/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="/yibinu_certificate/static/assets/js/jquery.backstretch.min.js"></script>

        <!--[if lt IE 10]>
            <script src="/yibinu_certificate/static/assets/js/placeholder.js"></script>
        <![endif]-->

    </head>

    <body>
		<div class="container">
			<div class="row">
				<div class="col-sm-6 col-sm-offset-3 form-box">
					<div class="form-top">

						<div class="widget-toolbar">
							<!-- 选项卡组件（菜单项nav-tabs）-->
							<ul class="nav nav-tabs" role="tablist" style="margin:0 auto;display:table;text-align:center;">
								<li class="active"><a href="#student" role="tab" data-toggle="tab" onclick="selectLoginType('student')">学生登录</a></li>
								<li><a href="#teacher" role="tab" data-toggle="tab" onclick="selectLoginType('teacher')">辅导员登录</a></li>
								<li><a href="#leader" role="tab" data-toggle="tab" onclick="selectLoginType('leader')">分管领导登录</a></li>
							</ul>
							<script type="text/javascript">

								// 调整屏幕自适应样式
								$(window).resize(autoAdjust);

								// 适应屏幕大小自动调整样式
								function autoAdjust(){
									$.backstretch("resize");
									// 屏幕窗口宽度
									var windowWidth = $(window).width();
									// 表单元素宽度
									var rowWidth = $('.form-top').width();
									if(windowWidth < 400 || rowWidth < 400){
										$('.nav-tabs>li').css("float","none");
									}else{
										$('.nav-tabs>li').css("float","left");
									}
								}

								// 选择登录类型
								function selectLoginType(type){
									$('#login_type').val(type);
								}
							</script>
						</div>

						<div class="form-top-left">
							<h3>用户登录</h3>
							<p>输入学号/教工号和密码以登录</p>
							<p style="color: red;">${msg}</p>
						</div>
						<div class="form-top-right">
							<i class="fa fa-lock"></i>
						</div>
					</div>
					<div class="form-bottom">
						<form role="form" action="/yibinu_certificate/login/userLogin" method="post" class="login-form">
							<input type="hidden" id="login_type" name="type" value="student"/>
							<div class="form-group">
								<label class="sr-only" for="form-username">账号：</label>
								<input type="text" name="account" placeholder="请输入学号/教工号" class="form-username form-control" id="form-username">
							</div>
							<div class="form-group">
								<label class="sr-only" for="form-password">密码：</label>
								<input type="password" name="password" placeholder="请输入密码" class="form-password form-control" id="form-password">
							</div>
							<button type="submit" class="btn">登录</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

    </body>
	<script>
        jQuery(document).ready(function() {

            // 全屏背景轮播图
            $.backstretch(
                ["/yibinu_certificate/static/assets/img/1.jpg",
					"/yibinu_certificate/static/assets/img/2.jpg",
					"/yibinu_certificate/static/assets/img/3.jpg",
					"/yibinu_certificate/static/assets/img/4.jpg",
					"/yibinu_certificate/static/assets/img/5.jpg"],{
				fade: 1*1000,
                duration: 3*1000,
            });

            // 自动调整样式
			autoAdjust();

            // 表单验证
            $('.login-form input[type="text"], .login-form input[type="password"], .login-form textarea').on('focus', function() {
                $(this).removeClass('input-error');
            });

            $('.login-form').on('submit', function(e) {

                $(this).find('input[type="text"], input[type="password"], textarea').each(function(){
                    if( $(this).val() == "" ) {
                        e.preventDefault();
                        $(this).addClass('input-error');
                    }
                    else {
                        $(this).removeClass('input-error');
                    }
                });

            });


        });
	</script>

</html>